<template>
    <div class="play-wrap">
        <audio ref="musicplay" :src="musicUrl"></audio>
        <div class="box" v-if="isShowBox">
            <div @click="hiddenBox" class="close">x</div>
            <div class="box-title">播放队列({{songList.length}})</div>
            <div class="box-wrap">
                <div
                @click="playSong(item.id)"
                :key="item.id"
                :class="$store.state.currentMusic.id == item.id ? 'current-box' : ''"
                v-for="item in songList"
                class="wrap-item">
                    <span>
                        <span class="iconfont">&#xe682;</span>
                        {{item.name}}
                    </span>
                    <span @click="jumpSinger(item.ar[0].id)">{{item.ar[0].name}}</span>
                    <span>{{item.dt | songTimer}}</span>
                </div>

            </div>
        </div>
        <div @click="kuaijin($event)" :title="currentMiao" @mousemove="showTime($event)" class="timer">
            <div ref="currenttime" class="t-default"></div>
        </div>
        <div class="play">
            <img v-if="currentMusicInfo != null" :src="currentMusicInfo.al.picUrl">
            <div class="info" v-if="currentMusicInfo != null">
                <div class="song">{{currentMusicInfo.name}}</div>
                <div class="name">{{currentMusicInfo.ar[0].name}}</div>
            </div>
            <div class="option">
                <span @click="shangyishou" class="iconfont">&#xe76e;</span>
                <span @click="stopPlaySong" v-if="isPlaySong == false" class="iconfont">&#xe682;</span>
                <span @click="stopPlaySong" v-if="isPlaySong == true" class="iconfont">&#xe668;</span>
                <span @click="xiayishou" class="iconfont">&#xe76d;</span>
            </div>
            <div class="yin">
                 <el-slider @input="setYin" v-model="yinDefault"></el-slider>
            </div>
            <div @click="showBox" class="song-list">
                <span class="iconfont">&#xe62b;</span>
            </div>
            <div class="timer-info">
                <div class="current">
                    <span class="current">{{currentShowPlaySongTime}}</span>
                </div>
                <div class="space">-</div>
                <div class="all">
                    <span class="current">{{timeAll}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 音量默认值
            yinDefault: 100,
            // 当前时间
            currentTimer: 0,
            // 当前音乐的长度(秒计)
            songAllTimer: this.$store.state.currentSongAlltimer,
            // 当前显示秒数
            currentMiao: 0,
            // 音乐url
            musicUrl: this.$store.state.currentMusicUrl,
            // 当前音乐详情
            currentMusicInfo: this.$store.state.currentMusic,
            // 是否正在播放歌曲
            isPlaySong: false,
            // 显示当前播放时间
            currentShowPlaySongTime: '00：00',
            // 是否显示播放队列
            isShowBox: false,
            // 播放队列
            songList: this.$store.state.currentSongList
        }
    },
    filters: {
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        }
    },
    computed: {
        // 总时长
        timeAll: function () {
            // 快进： 当前鼠标位置 / 总长度 * 总时长
            var fen = Math.floor((this.songAllTimer % 3600) / 60) < 10 ? '0' + Math.floor((this.songAllTimer % 3600) / 60) : Math.floor((this.songAllTimer % 3600) / 60);
            var miao = parseInt(this.songAllTimer % 60) < 10 ? '0' + parseInt(this.songAllTimer % 60) : parseInt(this.songAllTimer % 60);
            return  fen + '：' + miao;
        }
    },
    methods: {
        // 播放音乐
        async playSong(id) {
            this.$refs.musicplay.removeEventListener('timeupdate', this.getSongTimerAndLenght);
            this.$refs.musicplay.removeEventListener('ended', this.isPlayEnd);
            // 获取url
            let { data: res } = await this.$http.get('/song/url', { params: { id, br: 320000 } });
            this.musicUrl = res.data[0].url;
            
            // 获取音乐信息
            let { data: info } = await this.$http.get('/song/detail', { params: { ids: id } });
            this.currentMusicInfo = info.songs[0];

            // 是否已经存在
            var isSong = false;

            isSong = this.songList.some(item => {
                return item.id == info.songs[0].id;
            });

            if (isSong == false) {
                this.songList.push(info.songs[0]);
            }


            this.$store.commit('setCurrentSongList', this.songList);

            // 播放
            this.$nextTick(() => {
                this.$store.commit('setCurrentMusic', info.songs[0]);
                this.$store.commit('setCurrentMusicUrl', res.data[0].url);
                this.isPlaySong = true;
                this.$refs.musicplay.play();

                // 监控当前播放时间
                this.$refs.musicplay.addEventListener('timeupdate', this.getSongTimerAndLenght);

                // 监控播放是否结束
                this.$refs.musicplay.addEventListener('ended', this.isPlayEnd);
            })
        },
        // 暂停歌曲
        async stopPlaySong() {
            if (this.currentMusicInfo == null) {
                this.$message.error('当前播放队列暂无歌曲');    
            } else {
                this.isPlaySong = !this.isPlaySong;
                if (this.isPlaySong) {
                    this.$refs.musicplay.play();
                    this.songAllTimer = this.$refs.musicplay.duration;
                    this.$refs.musicplay.removeEventListener('timeupdate', this.getSongTimerAndLenght);
                    this.$refs.musicplay.removeEventListener('ended', this.isPlayEnd);
                    // 监控当前播放时间
                    this.$refs.musicplay.addEventListener('timeupdate', this.getSongTimerAndLenght);
                    this.$refs.musicplay.addEventListener('ended', this.isPlayEnd);
                } else {
                    this.$refs.musicplay.pause();
                }
            }
        },
        // 获取音频进度跟长度
        getSongTimerAndLenght() {
            //进度条宽度：当前时间 / 总时长 * 100 + '%
            this.currentTimer = this.$refs.musicplay.currentTime / this.songAllTimer * 100;
            this.$refs.currenttime.style.width = this.currentTimer + '%'; 

            var fen = Math.floor((this.$refs.musicplay.currentTime % 3600) / 60) < 10 ? '0' + Math.floor((this.$refs.musicplay.currentTime % 3600) / 60) : Math.floor((this.$refs.musicplay.currentTime % 3600) / 60);
            var miao = parseInt(this.$refs.musicplay.currentTime % 60) < 10 ? '0' + parseInt(this.$refs.musicplay.currentTime % 60) : parseInt(this.$refs.musicplay.currentTime % 60);
            
            this.currentShowPlaySongTime = fen + '：' + miao;
            this.$store.commit('setSongAllTimer', this.$refs.musicplay.duration);
            this.songAllTimer = this.$refs.musicplay.duration;

        },
        // 显示当前位置时间
        showTime(e) {
            // 快进： 当前鼠标位置 / 总长度 * 总时长
            var currentTime = e.offsetX / 1200 * this.songAllTimer;
            var fen = Math.floor((currentTime % 3600) / 60) < 10 ? '0' + Math.floor((currentTime % 3600) / 60) : Math.floor((currentTime % 3600) / 60);
            var miao = parseInt(currentTime % 60) < 10 ? '0' + parseInt(currentTime % 60) : parseInt(currentTime % 60);
            this.currentMiao = fen + '：' + miao;
        },
        // 快进
        kuaijin(e) {
            if (this.isPlaySong) {
                var currentTime = e.offsetX / 1200 * this.songAllTimer;
                this.$refs.musicplay.currentTime = currentTime;
            }
            
        },
        // 监控播放是否结束
        isPlayEnd() {
            this.isPlaySong = false;
            this.playXia();
        },
        // 显示播放队列
        showBox() {
            this.isShowBox = !this.isShowBox;
        },
        // 隐藏播放队列
        hiddenBox() {
            this.isShowBox = false;
        },

        // 播放下一首
        async playXia() {
            var indexc = -1;
            this.songList.forEach((item, index) => {
                if (item.id == this.currentMusicInfo.id) {
                    indexc = index;
                }
            });
            if (indexc == this.songList.length - 1) {
                this.$message.success('播放队列歌曲，播放完毕！');
            } else {
                this.$refs.musicplay.removeEventListener('timeupdate', this.getSongTimerAndLenght);
                this.$refs.musicplay.removeEventListener('ended', this.isPlayEnd);
                 // 获取url
                let { data: res } = await this.$http.get('/song/url', { params: { id: this.songList[indexc + 1].id, br: 320000 } });
                this.musicUrl = res.data[0].url;

                // 获取音乐信息
                let { data: info } = await this.$http.get('/song/detail', { params: { ids: this.songList[indexc + 1].id } });
                this.currentMusicInfo = info.songs[0];

                // 播放
                this.$nextTick(() => {
                    this.$store.commit('setCurrentMusic', info.songs[0]);
                    this.$store.commit('setCurrentMusicUrl', res.data[0].url);
                    this.$store.commit('setSongAllTimer', this.$refs.musicplay.duration);
                    this.songAllTimer = this.$refs.musicplay.duration;
                    this.isPlaySong = true;
                    this.$refs.musicplay.play();

                    // 监控当前播放时间
                    this.$refs.musicplay.addEventListener('timeupdate', this.getSongTimerAndLenght);

                    // 监控播放是否结束
                    this.$refs.musicplay.addEventListener('ended', this.isPlayEnd);
                });
            }
        },
        // 播放全部歌曲
        async playSongAll(all) {

            // 获取ID
            var songid = [];
            all.forEach(item => {
                songid.push(item.id);
            });

            this.$nextTick(async () => {
                // 获取音乐信息
                let { data: info } = await this.$http.get('/song/detail', { params: { ids: songid.toString() } });
                this.currentMusicInfo = info.songs[0];
                this.songList = info.songs;
                this.$store.commit('setCurrentSongList', this.songList);

                this.playSong(info.songs[0].id);

            });
            
           
        },
        // 设置音量
        setYin(value) {
            this.$refs.musicplay.volume = value / 100;
        },
        // 下一首
        xiayishou() {
            if (this.songList.length <= 0) {
                this.$message.error('播放队列，暂无可播放的歌曲！');
                return false;
            }

            // 获得当前索引
            var indexc = -1;
            this.songList.forEach((item, index) => {
                if (item.id == this.currentMusicInfo.id) {
                    indexc = index;
                }
            });

            if (indexc == this.songList.length - 1) {
                this.$message.error('已经是最后一首歌曲了！！！');
                return false;
            }

            this.playSong(this.songList[indexc + 1].id);
            
            
        },
        // 上一首
        shangyishou() {
            if (this.songList.length <= 0) {
                this.$message.error('播放队列，暂无可播放的歌曲！');
                return false;
            }

            // 获得当前索引
            var indexc = -1;
            this.songList.forEach((item, index) => {
                if (item.id == this.currentMusicInfo.id) {
                    indexc = index;
                }
            });

            if (indexc == 0) {
                this.$message.error('已经是第一首歌曲了！！！');
                return false;
            }

            this.playSong(this.songList[indexc - 1].id);

        },
        // 添加到播放队列
        async addPlayList(item) {
            var newArray = [];
            var flag = true;

            if (this.currentMusicInfo == null) {
                this.currentMusicInfo = item[0];
                this.$store.commit('setCurrentMusic', item[0]);
                // 获取url
                let { data: res } = await this.$http.get('/song/url', { params: { id: this.currentMusicInfo.id, br: 320000 } });
                this.musicUrl = res.data[0].url;
                this.$store.commit('setCurrentMusicUrl', res.data[0].url);
            }
            if (this.songList.length <= 0) {
                this.songList = item;
            } else {
                // 判断存不存在重复的歌曲
                for (var i = 0; i < item.length; i++) {
                    for (var j = 0; j < this.songList.length; j++) {
                        if (this.songList[j].id == item[i].id) {
                            flag = false;
                        }
                    }
                    if (flag) {
                        newArray.push(item[i]);
                    }
                    flag = true;
                }
                
                this.songList = [...this.songList, ...newArray];
            }
            

            this.$store.commit('setCurrentSongList', this.songList);
        },
        // 跳转到歌手页面
        async jumpSinger(id) {
            this.$router.push(`/singer/info/${id}`);
        },
        // 暂停播放
        stopMusic() {
            if (this.currentMusicInfo != null) {
                this.isPlaySong = false;
                this.$refs.musicplay.pause();
            }
        }
    }
}
</script>

<style lang="less" scoped>
.play-wrap {
    position: fixed;
    bottom: 0;
    width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
}

.timer {
    position: relative;
    width: 100%;
    height: 8px;
    background-color: #4b4b35;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    .t-default {
        width: 0;
        height: 100%;
        background-color: #d3d4ce;
        border-radius: 4px 4px 0 0;
    }
}

.play {
    position: relative;
    width: 100%;
    height: 58px;
    background-color: #3c3c3c;
    img {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
    }
    .info {
        position: absolute;
        width: 140px;
        height: 100%;
        left: 110px;
        .song {
            margin-bottom: 10px;
            margin-top: 6px;
        }
        .song,
        .name {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 14px;
            color: #fff;
        }
    }
    .option {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .iconfont {
            font-size: 40px;
            color: #fff;
            font-weight: 700;
            cursor: pointer;
            &:nth-child(2) {
                margin: 0 20px;
            }
        }
    }
    .yin {
        position: absolute;
        right: 200px;
        width: 120px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        .el-slider {
            z-index: 999;
        }

    }
    .timer-info {
        position: absolute;
        left: 300px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        .space {
            margin: 0 6px;
            font-size: 14px;
        }
        .current,
        .all,
        .space {
            display: inline-block;
            font-size: 14px;
        }
    }
    .song-list {
        position: absolute;
        right: 100px;
        top: 50%;
        transform: translateY(-50%);
        span {
            color: #fff;
            cursor: pointer;
            font-size: 30px;
        }
    }
}

.box {
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #3c3c3c;
    border-radius: 6px 6px 6px 6px;
    padding-bottom: 50px;
    .box-title {
        height: 50px;
        background-color: #1f1f1f;
        line-height: 50px;
        text-align: center;
        color: #fff;
        letter-spacing: 4px;
    }
    .close {
        position: absolute;
        top: 0;
        right: 10px;
        color: #fff;
        font-size: 30px;
        cursor: pointer;
    }
    .box-wrap {
        overflow-y: auto;
        height: 100%;
        .wrap-item {
            height: 30px;
            line-height: 30px;
            background-color: #242628;
            display: flex;
            &:hover {
                background-color: #161718;
            }
            span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #ccc;
                cursor: pointer;
                &:nth-child(1) {
                    flex: 5;
                    padding-left: 20px;
                    .iconfont {
                        color: #b50011;
                        font-weight: 700;
                        margin-right: 10px;
                    } 
                }
                &:nth-child(2) {
                    flex: 3;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                &:nth-child(3) {
                    flex: 1;
                }
            }
        }
    }
}

.current-box {
    background-color: #141516!important;
}

</style>